<template>
	<div class="receiving-address">
		<div class="title">我的收货地址</div>
		<div class="default-address-container">
			<div v-if="addressData != null">
				<div class="address-item">收货人：{{addressData.consignee}}</div>
				<div class="address-item">收货地址：{{addressData.addressDelivery}}</div>
				<div class="address-item">收货手机号：{{addressData.phone}}</div>
			</div>
			<div v-else>
				<div class="address-item">收货人：</div>
				<div class="address-item">收货地址：</div>
				<div class="address-item">收货手机号：</div>
			</div>
			<div>
				<el-button type="success" @click="handleAdd">新增地址</el-button>
				<el-button type="success" @click="handleChange">更换地址</el-button>
			</div>
		</div>
		<!-- 弹窗 -->
		<el-dialog title="更换地址" :visible.sync="dialogVisible" width="580px" :before-close="handleClose">
			<!-- 表格 -->
			<el-table :data="allAddressData" tooltip-effect="dark" style="width: 100%" ref="listTable">
				<el-table-column width="55">
					<template slot-scope="scope">
						<el-radio v-model="currentFactor" :label="scope.row" @input="singleElection">&nbsp;</el-radio>
					</template>
				</el-table-column>
				<el-table-column label="收货人" prop="consignee" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="addressDelivery" label="收货地址" show-overflow-tooltip></el-table-column>
				<el-table-column prop="phone" label="收货手机号" width="120" show-overflow-tooltip></el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="success" @click="submitChange">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="新增地址" :visible.sync="showAdd" width="580px" :before-close="closeAdd">
			<el-form :model="newAddress" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="收货人：" prop="consignee">
					<el-input v-model="newAddress.consignee"></el-input>
				</el-form-item>
				<el-form-item label="收货地址：" prop="addressDetail">
					<el-input v-model="newAddress.addressDelivery"></el-input>
				</el-form-item>
				<el-form-item label="收货手机号：" prop="phone">
					<el-input v-model="newAddress.phone"></el-input>
				</el-form-item>
				<el-checkbox style="float:right;" v-model="value">选为收货地址</el-checkbox>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAdd">取 消</el-button>
				<el-button type="success" @click="updateAddress">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import addressApi from "@/api/address.js"
	export default {
		props: {
			addressData: []
		},
		data() {
			return {
				currentFactor: '',
				templateRadio: null,
				userInfo: {},
				allAddressData: [],
				dialogVisible: false,
				showAdd: false,
				newAddress: {
					consignee: "",
					phone: '',
					addressDelivery: '',
				},
				value: ""
			};
		},
		methods: {
			changeChecked(e) {
				console.log("sssssss" + e);
				this.addressData.defaultAddress = e;
			},
			async getAllAdress() { //获取当前用户所有收货地址
				const res = await addressApi.AddressAll('/znDeliveryAddress/addressAll', {
					userName: this.userInfo.userName
				});
				if (res.code == 200) {
					this.allAddressData = res.data;
				}
			},
			async ChangeDefAddress(templateRadio) {
				const formData = new FormData();
				formData.append("addressId", templateRadio);
				formData.append("userName", this.userInfo.userName);
				const res = await addressApi.changeAddress('/znDeliveryAddress/changeAddress', formData);
				if (res.flag = true) {
					this.$message({
						message: res.msg,
						type: 'success'
					});
					this.$parent.defaultAddress();
				}
			},
			handleChange() {
				this.dialogVisible = true;
				this.getAllAdress();
			},
			submitChange() {
				this.ChangeDefAddress(this.templateRadio);
				this.dialogVisible = false;
			},
			handleClose() {
				this.dialogVisible = false
			},
			singleElection(row) {
				console.log(row.addressId)
				this.templateRadio = row.addressId;
			},
			closeAdd() {
				this.showAdd = false
				this.newAddress = {}
				this.value = ''
			},
			handleAdd() {
				this.showAdd = true
				this.newAddress = {}
			},
			async updateAddress() {
				const res = await addressApi.addUserAddress('/znDeliveryAddress/addUserAddress',{
					consignee: this.newAddress.consignee,
					phone: this.newAddress.phone,
					addressDelivery: this.newAddress.addressDelivery,
					defaultAddress: this.value ? 1 : 0,
				}).then((res) => {
					if (res.flag == true) {
						this.$parent.defaultAddress();
						this.$message.success(res.msg)
						this.showAdd = false
						this.newAddress = {}
						this.value = ''
					} else {
						this.showAdd = false
						this.$message.error(res.data)
					}
				});
			}
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.getAllAdress();
		},
	};
</script>

<style lang="scss" scoped>
	.receiving-address {
		position: relative;

		.title {
			border-bottom: 2px solid #f2f2f2;
			padding: 10px 0px;
			font-size: 18px;
		}
	}

	.default-address-container {
		border: 1px dashed darkseagreen;
		border-radius: 6px;
		padding: 10px 20px;
		display: flex;
		margin-top: 20px;
		align-items: center;
		justify-content: space-between;

		.address-item {
			line-height: 30px;
			height: 30px;
			margin-right: 50px;
		}
	}
</style>